<template>
  <div class="exam-detail">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>考试详情</span>
          <div class="header-actions">
            <el-button @click="handleBack">返回</el-button>
            <el-button type="primary" v-if="examDetail.status === 'draft'" @click="handlePublish">
              发布考试
            </el-button>
          </div>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="试卷名称">{{ examDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="科目">{{ examDetail.subject }}</el-descriptions-item>
        <el-descriptions-item label="考试时长">{{ examDetail.duration }}分钟</el-descriptions-item>
        <el-descriptions-item label="题目数量">{{ examDetail.questionCount }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ examDetail.startTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(examDetail.status)">
            {{ getStatusText(examDetail.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div class="section-title">试卷内容</div>
      <div class="question-list">
        <div 
          v-for="(question, index) in examDetail.questions" 
          :key="index"
          class="question-item"
        >
          <div class="question-header">
            <span>第{{ index + 1 }}题</span>
            <span>{{ question.score }}分</span>
          </div>
          <div class="question-content">{{ question.content }}</div>
          <div class="question-options" v-if="question.type === 'choice'">
            <div 
              v-for="(option, optIndex) in question.options" 
              :key="optIndex"
              class="option-item"
            >
              {{ String.fromCharCode(65 + optIndex) }}. {{ option }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const examDetail = ref({
  name: '',
  subject: '',
  duration: 0,
  questionCount: 0,
  startTime: '',
  status: 'draft',
  questions: []
})

// 状态映射
const statusMap = {
  draft: { type: 'info', text: '草稿' },
  pending: { type: 'warning', text: '待考试' },
  ongoing: { type: 'success', text: '进行中' },
  completed: { type: 'primary', text: '已完成' }
}

const getStatusType = (status) => statusMap[status]?.type || 'info'
const getStatusText = (status) => statusMap[status]?.text || '未知'

const handleBack = () => {
  router.back()
}

const handlePublish = () => {
  // TODO: 实现发布考试功能
}

// 加载考试详情
const loadExamDetail = async () => {
  // TODO: 实现加载考试详情
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 8px;
  border-left: 4px solid var(--el-color-primary);
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-item {
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  padding: 16px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--el-text-color-secondary);
}

.question-content {
  margin-bottom: 12px;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  padding: 8px;
  background-color: var(--el-fill-color-lighter);
  border-radius: 4px;
}
</style>
